<div class="layui-fluid layui-anim febs-anim" id="hr-staffLabel" lay-title="新建培训人员">
    <div class="layui-card-body febs-table-full" style="background: white;width: 100%;height: 100%">
        <div class="layui-form layui-border-box layui-table-view" lay-id="hr-staffLabel-staffLabel-table"
             style="width:100%; height: 100%">
            <!--================================卡片格式开始================================================-->
            <div class="layui-tab layui-tab-brief" lay-filter="demo">
                <ul class="layui-tab-title">
                    <li class="layui-this">组织部门</li>
                    <li>标签</li>
                    <li>员工</li>
                </ul>
                <div class="layui-tab-content" style="height: 100%;">
                    <div class="layui-tab-item layui-show">
                        <!--================================部门树开始================================================-->
                        <div class="layui-fluid layui-anim febs-anim" id="hr-qywxDept" lay-title="部门管理树">
                            <div class="layui-row layui-col-space8 febs-container">
                                <div class="layui-col-md6 layui-col-sm6 layui-col-xs12">
                                    <div class="layui-card">
                                        <div class="layui-card-body febs-table-full">
                                            <hr>
                                            <!-- 展示 部门树-->
                                            <div class="qywxDept-tree" id="aa" lay-filter="qywxDeptTree"
                                                 style="margin-left: 1rem">
                                            </div>
                                        </div>
                                        <div class="layui-card-footer">
                                            <button class="layui-btn layui-btn-normal" id="submit">确定</button>
                                            <button class="layui-btn  layui-btn-primary" id="cancel" onclick="window.location.reload()">取消</button>
                                        </div>
                                    </div>
                                </div>
                                <div class="layui-col-md6 layui-col-sm6 layui-col-xs12">
                                    <div class="layui-card">
                                        <div class="layui-card-header" id="form-header">已选部门:</div>
                                        <form class="layui-form layui-table-form" action="" lay-filter="dept-form">
                                            <textarea name=DeptNameS cols="100" rows="30" readonly="readonly"
                                                      style="border:0;background:transparent;resize: none;"></textarea>

                                        </form>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!--================================部门树结束================================================-->
                    </div>

                    <div class="layui-tab-item">
                        <!--================================标签开始================================================-->
                        <!--注意id属性每个页面id必须独立，lay-title为当前页面的标题属性-->
                        <div class="layui-fluid layui-anim febs-anim" id="hr-staffLabel-staffLabelSearch"
                             lay-title="标签信息">
                            <div class="layui-row febs-container">
                                <div class="layui-col-md12">
                                    <div class="layui-card">
                                        <div class="layui-card-body febs-table-full">
                                            <!--注意lay-filter属性，该属性为form表单唯一属性-->
                                            <form class="layui-form" lay-filter="labelOne-form">
                                                已选标签 : <input name=labelNameS type=text readonly="readonly"
                                                              style="border:0;background:transparent; width: 90%;">
                                                <div class="layui-form-item" pane="">
                                                    <div class="layui-input-block" id="hr-staffLabel-select">

                                                    </div>
                                                </div>
                                            </form>
                                            <table lay-filter="hr-staff-staff-tables"
                                                   lay-data="{id: 'hr-staff-staff-tables'}">
                                            </table>
                                            <div class="layui-card-footer" style="text-align:center">
                                                <button class="layui-btn layui-btn-normal"
                                                        id="hr-staffLabel-staffLabelSearch-submit">确定
                                                </button>
                                                <button class="layui-btn  layui-btn-primary"
                                                        id="hr-staffLabel-staffLabelSearch-cancel" onclick="window.location.reload()">取消
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!--================================标签结束================================================-->
                    </div>
                    <div class="layui-tab-item">
                        <!--================================员工开始================================================-->
                        <!--注意id属性每个页面id必须独立，lay-title为当前页面的标题属性-->
                        <div class="layui-fluid layui-anim febs-anim" id="hr-staff" lay-title="员工信息">
                            <div class="layui-row febs-container">
                                <div class="layui-col-md12">
                                    <div class="layui-card">
                                        <div class="layui-card-body febs-table-full">
                                            <!--注意lay-filter属性，该属性为form表单唯一属性-->
                                            <form class="layui-form layui-table-form" lay-filter="staff-table-form">
                                                <!--fieldset为区分搜索区域-->
                                                <fieldset class="layui-elem-field layui-field-title"
                                                          style="margin-top: 10px;">
                                                    <legend style="font-size: 15px; font-weight: bolder;"></legend>
                                                </fieldset>
                                                <div class="layui-row">
                                                    <!-- 查询信息 -->
                                                    <div class="layui-col-md11">
                                                        <!-- layui-form-item为自适应长度样式 -->
                                                        <div class="layui-form-item">
                                                            <!-- layui-inline样式为单行多控件 -->
                                                            <div class="layui-inline">
                                                                <label class="layui-form-label layui-form-label-sm"
                                                                       style="width: 100px">员工查询</label>
                                                                <div class="layui-input-inline">
                                                                    <!-- 注意name属性于定义的实体类属性一致，placeholder设置提示用语-->
                                                                    <!-- maxlength设置最大长度-->
                                                                    <input type="text" name="name" autocomplete="off"
                                                                           class="layui-input"
                                                                           placeholder="请输入..." minlength="0"
                                                                           maxlength="20">
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <!-- 查询重置按钮 -->
                                                    <!-- 注意id属性 用于绑定JS事件-->
                                                    <div class="layui-col-md1 layui-col-sm12 layui-col-xs12 table-action-area">
                                                        <div class="layui-btn layui-btn-sm layui-btn-primary febs-button-blue-plain
                                            table-action" id="hr-staff-query-btn">
                                                            <i class="layui-icon">&#xe848;</i>
                                                        </div>
                                                        <div class="layui-btn layui-btn-sm layui-btn-primary febs-button-green-plain
                                                                    table-action" id="hr-staff-reset-btn">
                                                            <i class="layui-icon">&#xe79b;</i>
                                                        </div>
                                                    </div>
                                                </div>
                                            </form>
                                            <!-- 表格 -->
                                            <!-- 注意lay-filter和id属性，两者需保持一致 用于绑定JS事件-->
                                            <table lay-filter="hr-staff-staff-table"
                                                   lay-data="{id: 'hr-staff-staff-table'}"></table>
                                        </div>
                                        <div style="text-align:center" class="layui-form-item hr-hide">
                                            <input type="button" class="layui-btn" lay-submit=""
                                                   lay-filter="select-btnCheckResults-submit"
                                                   id="btnCheckResults" value="确定">
                                            <input type="button" class="layui-btn layui-btn-primary" lay-submit=""
                                                   lay-filter="select-btnCheckResults-submit"
                                                   id="hr-staff-cancel-btn" value="取消">
                                        </div>
                                        <input type="hidden" id="formData">
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!--================================员工结束================================================-->
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!--================================部门脚本开始================================================-->
<script data-th-inline="javascript" type="text/javascript">

    layui.use(['jquery', 'form', 'tree', 'eleTree'], function () {

        let $ = layui.jquery,

            form = layui.form,
            validate = layui.validate,
            eleTree = layui.eleTree,
            $view = $('#hr-qywxDept'),
            $header = $view.find('#form-header'),
            _qywxDeptTree,
            // id数组
            deptIds = [],
            deptNames = "";

        let m = new Map();
        form.verify(validate);
        form.render();
        renderqywxDeptTree();

        //初始化
        function renderqywxDeptTree() {

            _qywxDeptTree = eleTree.render({

                elem: '#aa',
                url: ctx + 'qywxDept/tree',
                // accordion: true,
                highlightCurrent: true,
                // true 表示 勾选父节点 子节点不会全选
                checkStrictly: true,
                renderAfterExpand: false,
                // 是否显示复选框
                showCheckbox: true,
                //点击 树的内容 将  选框 勾选上
                checkOnClickNode: true,

                request: {
                    name: 'name',
                    key: "id",
                    checked: "checked",
                    data: 'data'
                },

                response: {
                    statusName: "code",
                    statusCode: 200,
                    dataName: "data"
                }

            });
            return _qywxDeptTree;
        }

        //点击确定 获得数据  选中的Id
        $view.on('click', '#submit', function () {

            deptIds = [],
                deptNames = []

            let checked = _qywxDeptTree.getChecked(false, true);
            layui.each(checked, function (key, item) {
                deptIds.push(item.id)
                deptNames.push(item.name)

            });

            //回显
            form.val("dept-form", {
                "DeptNameS": deptNames
            })

        });

        // 实时更新回显  显示 复选框选择的部门
        eleTree.on("nodeChecked(qywxDeptTree)", function (data) {

            let d = data.data.currentData.data;
            //判断 复选框是否选中 选中 执行if  取消勾选执行 else
            if (data.isChecked) {
                console.log("选中复选框 执行  。。。。。")
                deptNames = '',
                    m.set(d.deptName, d.deptName);
                for (var [key, value] of m) {
                    deptNames = deptNames +"   "+key+"\n";
                }
                $header.text("已选部门:");
                //回显
                form.val("dept-form", {
                    "DeptNameS": deptNames
                })
            }

            //如果取消 复选框 将deptNames 里的值
            else {
                deptNames = '';
                //删除 set里
                m.delete(d.deptName)
                //     迭代set 放到deptNames字符串里
                for (var [key, value] of m) {
                    deptNames = deptNames +"   "+key+"\n";
                }
                $header.text("已选部门:");
                //回显
                form.val("dept-form", {
                    "DeptNameS": deptNames
                })
            }

        });
    });
</script>
<!--================================部门脚本结束================================================-->

<!--================================标签脚本开始================================================-->
<script data-th-inline="none" type="text/javascript">

    layui.use(['jquery', 'form', 'table', 'febs'], function () {

        let $ = layui.jquery,
            febs = layui.febs,
            form = layui.form,
            table = layui.table,
            // 定义页面视图
            $view = $('#hr-staffLabel-staffLabelSearch'),
            // 定义表格排序
            sortObject = {field: 'address', type: null},
            // 定义form表单
            $searchForm = $view.find('table'),
            tableIns;

        // 定义一个存放上方展示的map
        let m = new Map();
        // 定义一个存放标签值的
        let ids = [];
        // 表单渲染
        form.render();
        // 勾选初始化
        initLable();
        // 调用列表初始化方法
        initTable(ids);
        let labelName = "";

        form.on('checkbox(hr-staffLabel-select)', function (data) {

                if (data.elem.checked) {

                    // 上方已选标签方法
                    labelName = "";
                    let xx = data.value;
                    m.set(xx, xx);

                    for (var [key, value] of m) {
                        labelName = labelName + key + ", \n";
                    }

                    // 删除逗号
                    labelName = labelName.substring(0, labelName.lastIndexOf(','));
                    form.val("labelOne-form", {
                        "labelNameS": labelName
                    })

                    // 将已选标签存放到ids数组中
                    ids.push(data.value);

                } else {

                    labelName = "";
                    let a = data.value;

                    m.delete(a);
                    for (var [key, value] of m) {
                        labelName = labelName + key + ", \n";
                    }

                    form.val("labelOne-form", {
                        "labelNameS": labelName
                    })

                    // 讲ids数组清空
                    const idss = ids.filter(function (item, index) {
                        return item != a;
                    })

                    ids = "";
                    ids = idss;
                    table.reload('hr-staff-staff-tables', {where: ids, page: {curr: 1}});

                }

                let params = $.extend(getQueryParams(), {
                    field: sortObject.field,
                    order: sortObject.type,
                    ids: ids
                });


                $view.on('click', '#hr-staffLabel-staffLabelSearch-submit', function () {
                    let idsss = [];
                    idsss = ids;
                    console.log("测试  得到的标签ID>>>" + idsss+"=====")
                });

                table.reload('hr-staff-staff-tables', {where: params, page: {curr: 1}});

            }
        );

        // 获得form表单中查询条件并格式化为JSON格式
        function getQueryParams(flag) {
            let params = $searchForm.serializeJson();
            console.log(params)
            return params;
        }

        function initLable() {

            $.ajax({

                type: 'get',
                url: 'staff/staffSelect',
                // 同步
                async: false,

                success: function (res) {

                    layui.each(res.data, function (index, item) {
                        $("#hr-staffLabel-select").append("<input lay-filter=\"hr-staffLabel-select\" id='ck' type='checkbox' name='condition' lay-skin='primary'" + "title=" + item.labelId + " + value='" + this.labelId + "'>");
                    });
                    // 渲染select
                    form.render();

                }
            })
        }

        // 初始化数据表格
        function initTable() {

            tableIns = febs.table.init({

                // 当前视图的table
                elem: $view.find('table'),
                // 列表ID
                id: 'hr-staff-staff-tables',
                // 访问路由
                url: ctx + 'staff/ListByLabel',
                // 配置列表顶部右侧显示列过滤项
                defaultToolbar: ['filter'],
                // 表格渲染完毕后的回调
                done: function (res, curr, count) {
                    // 调整表格在页面占比
                    $("table").css("width", "100%");
                },
                width: "100%",

                // field属性为返回实体类中相关属性名，title为表格列头显示内容，minWidth为表格列最小宽度，maxWidth为表格列最大宽度
                cols: [[
                    {type: 'checkbox'},
                    {field: 'id', title: '员工编号', minWidth: 150},
                    {field: 'name', title: '员工名称', minWidth: 150},
                    {field: 'alias', title: '员工别名', minWidth: 150},
                    {field: 'wxUserId', title: '微信id', minWidth: 150},
                    {field: 'position', title: '部门排序', minWidth: 150},
                    {field: 'mobile', title: '手机号', minWidth: 150},
                    {field: 'email', title: '电子邮件', minWidth: 150},
                    {field: 'thumbAvatar', title: '头像缩略图URL地址', minWidth: 150},
                    {field: 'status', title: '激活状态', minWidth: 150},
                    {field: 'openId', title: '开放id', minWidth: 150},
                    {field: 'lastModifyDate', title: '最终修改时间', minWidth: 200},
                    {field: 'labelId', title: '标签id', minWidth: 200},
                ]]
            });
        }
    })

</script>
<!--================================标签脚本结束================================================-->

<!--================================员工脚本开始================================================-->
<script data-th-inline="none" type="text/javascript">

    // // 定义一个全局变量存id
    let staffId = [];

    layui.use(['dropdown', 'jquery', 'form', 'table', 'febs'], function () {

        let $ = layui.jquery,
            febs = layui.febs,
            form = layui.form,
            table = layui.table,

            // 定义页面视图
            $view = $('#hr-staff'),
            // 定义查询按钮
            $query = $view.find('#hr-staff-query-btn'),
            // 取消按钮
            $cancel = $view.find('#hr-staff-cancel-btn'),
            // 定义重置按钮
            $reset = $view.find('#hr-staff-reset-btn'),
            // 定义form表单
            $searchForm = $view.find('form'),
            // 定义表格排序
            sortObject = {field: 'id', type: null},
            tableIns;

        // 表单渲染
        form.render();

        // 调用列表初始化方法
        initTable();

        // 查询按钮点击事件
        $query.on('click', function () {
            // 获得页面检索条件
            let params = $.extend(getQueryParams(), {field: sortObject.field, order: sortObject.type});
            // 重新加载列表
            tableIns.reload({where: params, page: {curr: 1}});
        });

        // 在个位数的时间前加0
        function formatZero(n) {
            if (n >= 0 && n <= 9) {
                return "0" + n;
            } else {
                return n;
            }
        }

        // 取消按钮点击事件
        $cancel.on('click', function () {
            // 清空表单信息
            $searchForm[0].reset();
            sortObject.type = 'null';
            // 重新加载表格数据
            tableIns.reload({where: getQueryParams(true), page: {curr: 1}, initSort: sortObject});
        });

        // 重置按钮点击事件
        $reset.on('click', function () {
            // 清空表单信息
            $searchForm[0].reset();
            sortObject.type = 'null';
            // 重新加载表格数据
            tableIns.reload({where: getQueryParams(true), page: {curr: 1}, initSort: sortObject});
        });

        // 初始化数据表格
        function initTable() {

            tableIns = febs.table.init({

                // 当前视图的table
                elem: $view.find('table'),
                // 列表ID
                id: 'hr-staff-staff-table',
                // 访问路由
                url: ctx + 'staff/golist',
                // 配置列表顶部工具栏
                toolbar: '#hr-staff-staff-toolbar',
                // 配置列表顶部右侧显示列过滤项
                defaultToolbar: ['filter'],
                // 表格渲染完毕后的回调

                done: function (res, curr, count) {
                    // 调整表格在页面占比
                    $("table").css("width", "100%");
                },

                width: "100%",
                // field属性为返回实体类中相关属性名，title为表格列头显示内容，minWidth为表格列最小宽度，maxWidth为表格列最大宽度

                cols: [[
                    {type: 'checkbox'},
                    {field: 'id', title: '员工编号', minWidth: 150},
                    {field: 'name', title: '员工名称', minWidth: 150},
                    {field: 'alias', title: '员工别名', minWidth: 150},
                    {field: 'wxUserId', title: '微信id', minWidth: 150},
                    {field: 'position', title: '部门排序', minWidth: 150},
                    {field: 'mobile', title: '手机号', minWidth: 150},
                    {field: 'email', title: '电子邮件', minWidth: 150},
                    {field: 'thumbAvatar', title: '头像缩略图URL地址', minWidth: 150},
                    {field: 'status', title: '激活状态', minWidth: 150},
                    {field: 'openId', title: '开放id', minWidth: 150},
                    {field: 'lastModifyDate', title: '最终修改时间', minWidth: 200},
                ]]
            });
        }

        // 获得form表单中查询条件并格式化为JSON格式
        function getQueryParams(flag) {
            let params = $searchForm.serializeJson();
            return params;
        }

        //选择勾选状态
        $("#btnCheckResults").click(function () {

            staffId = [];
            let checkStatus = table.checkStatus("hr-staff-staff-table");
            let data = checkStatus.data;

            if (data.length > 0) {
                for (let i = 0; i < data.length; i++) {
                    let check = data[i].id;
                    staffId.push(check);
                }

                let params = $.extend(getQueryParams(), {field: sortObject.field, order: sortObject.type});
                tableIns.reload({where: params, page: {curr: 1}});

            } else {
                febs.alert.warn('至少选择一个员工');
            }
        });

        //按回车搜索
        $(".layui-input").keyup(function (e) {
            //当按下按键时
            //.which属性判断按下的是哪个键，回车键的键位序号为13
            if (e.which == 13) {
                $query.click();
            }
        });
    })

</script>
<!--================================员工脚本结束================================================-->